var narrative_html = "";
var listMarkers = [];

  function load(places, mapid) {
	if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById(mapid));

		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GOverviewMapControl());

		// Create a base icon for all of the church markers
		var baseIcon = new GIcon();
		baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
		baseIcon.iconSize = new GSize(20, 34);
		baseIcon.shadowSize = new GSize(37, 34);
		baseIcon.iconAnchor = new GPoint(9, 34);
		baseIcon.infoWindowAnchor = new GPoint(9, 2);
		baseIcon.infoShadowAnchor = new GPoint(18, 25);
		var icon = new GIcon(baseIcon);

		// Add markers for stops on the map

		GDownloadUrl(places, function(data, responseCode) {
			var xml = GXml.parse(data);
			var startPoint = xml.documentElement;
			var region = startPoint.getAttribute("region");
			var mapCenterLat = startPoint.getAttribute("mapCenterLat");
			var mapCenterLng = startPoint.getAttribute("mapCenterLng");
			var zoom = parseFloat(startPoint.getAttribute("zoom"));
			map.setCenter(new GLatLng(mapCenterLat, mapCenterLng), zoom);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (i = 0; i < markers.length; i++) {
				var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
							parseFloat(markers[i].getAttribute("lng")));
				var details = markers[i].getAttribute("details");
				// use @locus in preference to @church
				var locus = markers[i].getAttribute("locus");
				if (locus == null) {
					locus = markers[i].getAttribute("church");
				}
				var label = markers[i].getAttribute("label");

				icon.iconSize = new GSize(20, 34);				
				if (label == null) {				
					var image = markers[i].getAttribute("image");
					if (image == null) {					
						icon.image = "http://www.google.com/mapfiles/marker" + ".png";
					}
					else {
						icon.image = image;
						var imageHeight = markers[i].getAttribute("image-height");
						var imageWidth = markers[i].getAttribute("image-width");
						icon.iconSize = new GSize(imageWidth, imageHeight);
					}
					map.addOverlay(createMarker(point, icon, markers[i].getAttribute("place"), locus, i,details));
				}
				else {
					icon.image = "http://www.google.com/mapfiles/marker" + label + ".png";
					map.addOverlay(createMarker(point, icon, markers[i].getAttribute("place"), locus, i, details));
					document.getElementById(label).innerHTML = narrative_html;
				}

			}
		});

	}
  }

  function createMarker(point, icon, place, locus, i, details) {
	var marker = new GMarker(point, icon);
	GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml('<h3>' + place + '</h3>' + locus);  });
        listMarkers[i] = marker;
        narrative_html = '<a href="javascript:myclick(' + i + ')">' + '<img src="' + icon.image + '">' + '</a> ';
	return marker;
  }

// This function picks up the click in the navigation list and opens the corresponding info window
  function myclick(i) {
	GEvent.trigger(listMarkers[i], "click");
  }